import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { TitleComponent } from 'echarts/components';
import { TooltipComponent } from 'echarts/components';
import { LegendComponent } from 'echarts/components';
import { ToolboxComponent } from 'echarts/components';
import axios from 'axios';
echarts.use([ToolboxComponent]);
echarts.use([LegendComponent]);
echarts.use([TooltipComponent]);
echarts.use([TitleComponent]);
echarts.use([LineChart]);
echarts.use([GridComponent]);

echarts.use([BarChart, CanvasRenderer]);

const EChartsComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const myChart = echarts.init(chartRef.current);

    axios.get('http://localhost:1234/works/data1')
      .then(res => {
        let arr = [0, 0, 0, 0, 0]
        console.log(res)

        for (let i = 0; i < res.length; i++) {
          if (res[i].type == 0) {
            arr[0]++
          }
          else if (res[i].type == 1) {
            arr[1]++
          }
          else if (res[i].type == 2) {
            arr[2]++
          }
          else if (res[i].type == 3) {
            res[3]++
          }
          else if (res[i].type == 4) {
            res[4]++
          }
        }



        const option = {
          title: {
            text: '素材类型个数统计'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['剧本', '影视剧', '英文', '动漫', '合拍']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: arr,
              type: 'line',
              areaStyle: {},
              smooth: true
            }
          ]
        };

        myChart.setOption(option);
      })




    return () => {
      myChart.dispose();
    };
  }, []);

  return <div ref={chartRef} style={{
    width: '290px',
    height: '250px'

  }} />;
};

export default EChartsComponent;